<template>
  <!-- 报警 -->
  <div class="body_">
    <div class="header">
      <div class="TitleForm">
        <el-form ref="form" :model="TitleForm" label-width="120px" inline>
          <el-form-item label="用户名称">
            <el-input
              placeholder="请输入名称或编码"
              v-model="TitleForm.name"
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号码">
            <el-input
              placeholder="请输入手机号码"
              v-model="TitleForm.name"
            ></el-input>
          </el-form-item>
        </el-form>
        <div class="queryBtn">
          <el-button @click="queryInfo" type="primary" icon="el-icon-search"
            >搜索</el-button
          >
        </div>
      </div>
    </div>
    <div class="main">
      <el-table
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column prop="date" label="用户编号" width="180">
        </el-table-column>
        <el-table-column prop="name" label="用户名称" width="180">
        </el-table-column>
        <el-table-column prop="address" label="部门"> </el-table-column>
        <el-table-column prop="address" label="手机号码"> </el-table-column>
        <el-table-column prop="address" label="状态">
          <template slot-scope="scope">
            <span class="operter">{{ scope.row.states }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="创建时间"> </el-table-column>
        <el-table-column prop="address" label="操作">
          <template slot-scope="scope">
            <span class="operter">{{ scope.row.operte }}</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div class="block" style="margin-top: 15px">
        <el-pagination
          align="center"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[1, 5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "first",
      tableData: [
        {
          date: "2",
          name: "test1",
          address: "02151",
          state: "正常",
          operte: "操作",
          states: "启用",
          phone: "1508888886",
        },
      ],
      currentPage: 1, // 当前页码
      total: 4, // 总条数
      pageSize: 10, // 每页的数据条数

      TitleForm: {
        name: "",
        state: "",
        time: "",
      },
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleSizeChange() {},
    handleCurrentChange() {},
    queryInfo() {
      this.$message({
        message: "查询成功",
        type: "success",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.body_ {
  overflow: hidden;
  padding-top: 0.2625rem;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 5px;
  display: flex;
  flex-direction: column;
  .header {
    width: 100%;
    //height: 0.85rem /* 68/80 */;
    border-radius: 4px;
    background-color: rgb(255, 255, 255);
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  }
  .main {
    margin-top: 0.3rem /* 24/80 */;
    width: 100%;
    //height: 8.925rem /* 618/80 */;
    border-radius: 4px;
    background-color: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    flex: 1;
  }
}
.operter {
  color: rgba(59, 140, 255, 1) !important;
  cursor: pointer;
}
//.queryBtn {
//  position: absolute;
//  right: 2.125rem /* 170/80 */;
//  top: 0;
//}
</style>
